'use client'
import './style.css';
import React,{useState} from 'react';
import Table from '../../../components/table';
import type {ProColumns } from '@ant-design/pro-components';
import { Button, Dropdown, Space, Tag } from 'antd';
import { TableDropdown } from '@ant-design/pro-components';
type GithubIssueItem = {
  url: string;
  id: number;
  number: number;
  title: string;
  labels: {
    name: string;
    color: string;
  }[];
  state: string;
  comments: number;
  created_at: string;
  updated_at: string;
  closed_at?: string;
};

let ChildRef:any = React.createRef()
const columns: ProColumns<GithubIssueItem>[] = [
  {
    dataIndex: 'index',
    valueType: 'indexBorder',
    width: 48,
  },
  {
    title: '标题',
    dataIndex: 'title',
    copyable: true,
    ellipsis: true,
    tip: '标题过长会自动收缩',
    formItemProps: {
      rules: [
        {
          required: true,
          message: '此项为必填项',
        },
      ],
    },
  },
  {
    disable: true,
    title: '状态',
    dataIndex: 'state',
    filters: true,
    onFilter: true,
    ellipsis: true,
    valueType: 'select',
    valueEnum: {
    
      open: {
        text: '未解决',
        status: 'Error',
      },
      closed: {
        text: '已解决',
        status: 'Success',
       
      },
      processing: {
        text: '解决中',
        status: 'Processing',
      },
    },
  },
  {
    disable: true,
    title: '标签',
    dataIndex: 'labels',
    search: false,
    renderFormItem: (_, { defaultRender }) => {
      return defaultRender(_);
    },
    render: (_, record) => (
      <Space>
        {record.labels.map(({ name, color }) => (
          <Tag color={color} key={name}>
            {name}
          </Tag>
        ))}
      </Space>
    ),
  },
  {
    title: '创建时间',
    key: 'showTime',
    dataIndex: 'created_at',
    valueType: 'date',
    sorter: true,
    hideInSearch: true,
  },
  // {
  //   title: '创建时间',
  //   dataIndex: 'created_at',
  //   valueType: 'dateRange',
  //   hideInTable: true,
  //   search: {
  //     transform: (value) => {
  //       return {
  //         startTime: value[0],
  //         endTime: value[1],
  //       };
  //     },
  //   },
  // },
  {
    title: '操作',
    valueType: 'option',
    key: 'option',
    render: (text, record, _, action) => [
      <a
        key="editable"
        onClick={() => {
          action?.startEditable?.(record.id);
        }}
      >
        编辑
      </a>,
      <a href={record.url} target="_blank" rel="noopener noreferrer" key="view">
        查看
      </a>,
      <TableDropdown
        key="actionGroup"
        onSelect={() => action?.reload()}
        menus={[
          { key: 'copy', name: '复制' },
          { key: 'delete', name: '删除' },
        ]}
      />,
    ],
  },
];
const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};
const submitForm = async (row:any)=>{
	console.log(row)
	let msdf:any = {
		'bug':"error",
		'question':"success",
	}
	row.labels = [{
	        "name": row.labels,
	        "color": msdf[row.labels]
	    }]
	row.created_at =  new Date()
	await waitTime(1000)
	ChildRef.current.addData(row)
	return true
}
const formConfig = {
	list:[
		{type:'input',label:'标题',prop:'title',tooltip:'最长为 24 位',placeholder:'请输入标题'},
		{type:'select',label:'状态',prop:'state',width:'xs',placeholder:'请选择状态',option:[
			{
			  value: 'open',
			  label: '未解决',
			},
			{
			  value: 'closed',
			  label: '已解决',
			},{
			  value: 'processing',
			  label: '解决中',
			}
		]},
		{type:'select',label:'标签',prop:'labels',width:'xs',placeholder:'请选择状态',option:[
			{
			  value: 'bug',
			  label: 'bug',
			},
			{
				value: 'question',
				label: 'question',
			}
				  
		]},
	]
}



const App: React.FC = () => {
  return <>
  	<Table onRef={ChildRef} config={{columns,api:'/data.json',submitForm:submitForm,formConfig:formConfig}}></Table>
 </>
}


export default App;